import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, InputNumber, Upload, Button, Icon, Select, Radio, Card, Col, Tabs,message} from 'antd';
import { formatMessage } from 'umi-plugin-react/locale';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import React, { useState } from 'react';
import { queryRule, updateRule, addRule, removeRule } from '../service';
import styles from '../style.less';

// 导入自定义组件1
import PreviewForm from '@/components/PreviewForm';
import * as BdHelper from '@/utils/BdHelper';
import * as DataHelper from '@/helpers/DataHelper';
import * as TsxHelper from '@/helpers/TsxHelper';

// 常量
const { TextArea } = Input;
const FormItem = Form.Item;
const {TabPane} = Tabs;

// 定义: 数据表单属性
interface DataFormProps extends FormComponentProps {
  // dataModalVisible: boolean;
  isUpdate: boolean
  dataImgFormValues: any
  common: any
  imageValues: any
}

// 数据表单
const DataForm: React.FC<DataFormProps> = props => {
  // 组件属性
  const { form, common, isUpdate,dataImgFormValues,imageValues } = props;

  // 图片状态
  const [picture, setPicture] = useState<any[]>([]);
  const [uploadChanged, setUploadChanged] = useState<boolean>(false);
  const [pictureVideo, setPictureVideo] = useState<any[]>([]);
  const [uploadVideoChanged, setUploadVideoChanged] = useState<boolean>(false);
  const [pictureAudio, setPictureAudio] = useState<any[]>([]);
  const [uploadAudioChanged, setUploadAudioChanged] = useState<boolean>(false);
  const [pictureFile, setPictureFile] = useState<any[]>([]);
  const [uploadFileChanged, setUploadFileChanged] = useState<boolean>(false);
  const [previewModelVisible, handlePreviewModalVisible] = useState<boolean>(false);
  const [previewImg, setPreviewImg] = useState('');
  const [dataFormValues, setDataFormValues] = useState({});
  const [activeTabKey, setActivityKey] = useState<any>('1');

  const getCommon = () => {
    queryRule({alias_key:'img_setting'}).then(res=>{
      // setCommonNew(res.data.common);
    });
  }

  //提交表单
  const okImageHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if(picture.length > 0){
        fieldsValue.file_id   = picture[0].file_id
        fieldsValue.file_url  = picture[0].file_url
      }
      
      console.log("submit fields ", fieldsValue)

      var submitValue = [
        {
          "alias_key": 'img_setting',
          "item_type":'system',
          "dict_item_arr": [
            {
              "alias_key": "images_service",
              "item_value": fieldsValue.images_service,
              'item_type':"select",
            },
            {
              "alias_key": "images_secret_id",
              "item_value": fieldsValue.images_secret_id,
              'item_type':"text",
            },
            {
              "alias_key": "images_secret_key",
              "item_value": fieldsValue.images_secret_key,
              'item_type':"text",
            },
            {
              "alias_key": "images_bucket_name",
              "item_value":fieldsValue.images_bucket_name,
              'item_type':"text",
            },
            {
              "alias_key": "images_bucket_area",
              "item_value": fieldsValue.images_bucket_area,
              'item_type':"text",
            },
            {
              "alias_key": "images_bucket_domain",
              "item_value": fieldsValue.images_bucket_domain,
              'item_type':"url",
            },
            {
              "alias_key": "images_ext",
              "item_value": fieldsValue.images_ext,
              'item_type':"text",
            },
            {
              "alias_key": "images_max_size",
              "item_value": fieldsValue.images_max_size,
              'item_type':"number",
            },
            {
              "alias_key": "images_url_key",
              "item_value":fieldsValue.images_url_key,
              'item_type':"text",
            },
            {
              "alias_key": "images_url_expire",
              "item_value": fieldsValue.images_url_expire,
              'item_type':"text",
            },
            {
              "alias_key": "images_avatar_thumb",
              "item_value": fieldsValue.images_avatar_thumb,
              'item_type':"text",
            },
            {
              "alias_key": "images_avatar_big",
              "item_value":fieldsValue.image_avatar_big,
              'item_type':"text",
            },
            {
              "alias_key": "images_comment_thumb",
              "item_value": fieldsValue.images_comment_thumb,
              'item_type':"text",
            },
            {
              "alias_key": "images_comment_square",
              "item_value":fieldsValue.image_comment_square,
              'item_type':"text",
            },
            {
              "alias_key": "images_comment_big",
              "item_value": fieldsValue.image_comment_big,
              'item_type':"text",
            },
            {
              "alias_key": "images_post_thumb",
              "item_value": fieldsValue.images_post_thumb,
              'item_type':"text",
            },
            {
              "alias_key": "images_post_square",
              "item_value": fieldsValue.image_post_square,
              'item_type':"text",
            },
            {
              "alias_key": "images_post_big",
              "item_value": fieldsValue.image_post_big,
              'item_type':"text",
            },
          ]
        }
    ]
    // 如果更新成功之后，重置表单
    updateRule({config_json: JSON.stringify(submitValue)}).then((res:any) => {
      console.log('handleSubmit then success is ', JSON.stringify(submitValue))
      if(res.code == 0){
        message.success('保存成功');
        // form.resetFields()
        // setPicture([]);
        // setPictureLogo([]);
      }
    })

    });
  };

  const okVideoHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if(picture.length > 0){
        fieldsValue.file_id   = picture[0].file_id
        fieldsValue.file_url  = picture[0].file_url
      }
      
      console.log("submit fields ", fieldsValue)

      var submitValue = [
        {
          "alias_key": 'video_setting',
          "item_type":'system',
          "dict_item_arr": [
            {
              "alias_key": "videos_service",
              "item_value": fieldsValue.videos_service,
              'item_type':"select",
            },
            {
              "alias_key": "videos_secret_id",
              "item_value": fieldsValue.videos_secret_id,
              'item_type':"text",
            },
            {
              "alias_key": "videos_secret_key",
              "item_value": fieldsValue.videos_secret_key,
              'item_type':"text",
            },
            {
              "alias_key": "videos_bucket_name",
              "item_value":fieldsValue.videos_bucket_name,
              'item_type':"text",
            },
            {
              "alias_key": "videos_bucket_area",
              "item_value": fieldsValue.videos_bucket_area,
              'item_type':"text",
            },
            {
              "alias_key": "videos_bucket_domain",
              "item_value": fieldsValue.videos_bucket_domain,
              'item_type':"url",
            },
            {
              "alias_key": "videos_ext",
              "item_value": fieldsValue.videos_ext,
              'item_type':"text",
            },
            {
              "alias_key": "videos_max_size",
              "item_value": fieldsValue.videos_max_size,
              'item_type':"number",
            },
            {
              "alias_key": 'videos_max_time',
              "item_value": fieldsValue.videos_max_time,
              'item_type':"number",
            },
            {
              "alias_key": "videos_url_key",
              "item_value":fieldsValue.videos_url_key,
              'item_type':"text",
            },
            {
              "alias_key": "videos_url_expire",
              "item_value": fieldsValue.videos_url_expire,
              'item_type':"text",
            },
            {
              "alias_key": "videos_transcode",
              "item_value": fieldsValue.videos_transcode,
              'item_type':"text",
            },
            {
              "alias_key": "videos_watermark",
              "item_value":fieldsValue.videos_watermark,
              'item_type':"text",
            },
            {
              "alias_key": "videos_screenshot",
              "item_value": fieldsValue.videos_screenshot,
              'item_type':"text",
            },
            {
              "alias_key": "videos_gift",
              "item_value":fieldsValue.videos_gift,
              'item_type':"text",
            }
          ]
        }
    ]
    // 如果更新成功之后，重置表单
    updateRule({config_json: JSON.stringify(submitValue)}).then((res:any) => {
      console.log('handleSubmit then success is ', JSON.stringify(submitValue))
      if(res.code == 0){
        message.success('保存成功');
        // form.resetFields()
      }
    })
    });
  };

  const okAudioHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if(picture.length > 0){
        fieldsValue.file_id   = picture[0].file_id
        fieldsValue.file_url  = picture[0].file_url
      }
      
      console.log("submit fields ", fieldsValue)

      var submitValue = [
        {
          "alias_key": 'audio_setting',
          "item_type":'system',
          "dict_item_arr": [
            {
              "alias_key": "audios_service",
              "item_value": fieldsValue.audios_service,
              'item_type':"select",
            },
            {
              "alias_key": "audios_secret_id",
              "item_value": fieldsValue.audios_secret_id,
              'item_type':"text",
            },
            {
              "alias_key": "audios_secret_key",
              "item_value": fieldsValue.audios_secret_key,
              'item_type':"text",
            },
            {
              "alias_key": "audios_bucket_name",
              "item_value":fieldsValue.audios_bucket_name,
              'item_type':"text",
            },
            {
              "alias_key": "audios_bucket_area",
              "item_value": fieldsValue.audios_bucket_area,
              'item_type':"text",
            },
            {
              "alias_key": "audios_bucket_domain",
              "item_value": fieldsValue.audios_bucket_domain,
              'item_type':"url",
            },
            {
              "alias_key": "audios_ext",
              "item_value": fieldsValue.audios_ext,
              'item_type':"text",
            },
            {
              "alias_key": "audios_max_time",
              "item_value": fieldsValue.audios_max_time,
              'item_type':"number",
            },
            {
              "alias_key": "audios_max_size",
              "item_value": fieldsValue.audios_max_size,
              'item_type':"number",
            },
            {
              "alias_key": "audios_url_key",
              "item_value":fieldsValue.audios_url_key,
              'item_type':"text",
            },
            {
              "alias_key": "audios_url_expire",
              "item_value": fieldsValue.audios_url_expire,
              'item_type':"text",
            },
            {
              "alias_key": "audios_transcode",
              "item_value": fieldsValue.audios_transcode,
              'item_type':"text",
            },
          ]
        }
    ]
    // 如果更新成功之后，重置表单
    updateRule({config_json: JSON.stringify(submitValue)}).then((res:any) => {
      console.log('handleSubmit then success is ', JSON.stringify(submitValue))
      if(res.code == 0){
        message.success('保存成功');
        // form.resetFields()
      }
    })
    });
  };

  const okFileHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if(picture.length > 0){
        fieldsValue.file_id   = picture[0].file_id
        fieldsValue.file_url  = picture[0].file_url
      }
      
      console.log("submit fields ", fieldsValue)

      var submitValue = [
        {
          "alias_key": 'file_setting',
          "item_type":'system',
          "dict_item_arr": [
            {
              "alias_key": "docs_service",
              "item_value": fieldsValue.docs_service,
              'item_type':"select",
            },
            {
              "alias_key": "docs_secret_id",
              "item_value": fieldsValue.docs_secret_id,
              'item_type':"text",
            },
            {
              "alias_key": "docs_secret_key",
              "item_value": fieldsValue.docs_secret_key,
              'item_type':"text",
            },
            {
              "alias_key": "docs_bucket_name",
              "item_value":fieldsValue.docs_bucket_name,
              'item_type':"text",
            },
            {
              "alias_key": "docs_bucket_area",
              "item_value": fieldsValue.docs_bucket_area,
              'item_type':"text",
            },
            {
              "alias_key": "docs_bucket_domain",
              "item_value": fieldsValue.docs_bucket_domain,
              'item_type':"url",
            },
            {
              "alias_key": "docs_ext",
              "item_value": fieldsValue.docs_ext,
              'item_type':"text",
            },
            {
              "alias_key": "docs_max_size",
              "item_value": fieldsValue.docs_max_size,
              'item_type':"number",
            },
            {
              "alias_key": "docs_url_key",
              "item_value":fieldsValue.docs_url_key,
              'item_type':"text",
            },
            {
              "alias_key": "docs_url_expire",
              "item_value": fieldsValue.docs_url_expire,
              'item_type':"text",
            },
            {
              "alias_key": "docs_online_preview",
              "item_value": fieldsValue.docs_online_preview,
              'item_type':"text",
            },
            {
              "alias_key": "docs_preview_ext",
              "item_value": fieldsValue.docs_preview_ext,
              'item_type':"text",
            },
          ]
        }
    ]
    // 如果更新成功之后，重置表单
    updateRule({config_json: JSON.stringify(submitValue)}).then((res:any) => {
      console.log('handleSubmit then success is ', JSON.stringify(submitValue))
      if(res.code == 0){
        message.success('保存成功');
        // form.resetFields()
      }
    })
    });
  };

  const okUploadHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if(picture.length > 0){
        fieldsValue.file_id   = picture[0].file_id
        fieldsValue.file_url  = picture[0].file_url
      }
      
      console.log("submit fields ", fieldsValue)

      var submitValue = [
        {
          "alias_key": 'cover_setting',
          "item_type":'system',
          "dict_item_arr": [
            {
              "alias_key": "repair_image",
              "item_value": picture.length>0?picture[0].file_url:parseData('repair_image',imageValues),
              'item_type':"file",
            },
            {
              "alias_key": "repair_video",
              "item_value": pictureVideo.length>0?pictureVideo[0].file_url:parseData('repair_video',imageValues),
              'item_type':"file",
            },
            {
              "alias_key": "repair_audio",
              "item_value": pictureAudio.length>0?pictureAudio[0].file_url:parseData('repair_audio',imageValues),
              'item_type':"file",
            },
            {
              "alias_key": "repair_doc",
              "item_value": pictureFile.length>0?pictureFile[0].file_url:parseData('repair_doc',imageValues),
              'item_type':"file",
            }
          ]
        }
    ]
    // 如果更新成功之后，重置表单
    updateRule({config_json: JSON.stringify(submitValue)}).then((res:any) => {
      console.log('handleSubmit then success is ', JSON.stringify(submitValue))
      if(res.code == 0){
        // form.resetFields()
        message.success('保存成功');
      }
    })
    });
  };

  const queryData = (key:any)=>{
    var itemKey = "img_setting";
    if(key == '2'){
      itemKey = "video_setting";
    }else if(key == '3'){
      itemKey = "audio_setting";
    }else if(key == '4'){
      itemKey = "file_setting";
    }
    queryRule({item_key: itemKey}).then(res=>{
      // setCommon(res.data.common);
      if(res.data.list && res.data.list.length>0){
        setDataFormValues(res.data.list[0]?.item_value_decode);
      }
      // setInitLoading(false);
    });
  }

  // 设置上传文件值
  const setUploadFile = (fileList:any) => {
    setUploadChanged(true)
    let fileArr = DataHelper.getLastUploadFile(fileList)
    console.log("fileArr is ", fileArr)
    if(fileArr.length > 0){
      setPicture(fileArr)
      // setPreviewImg(fileArr[0].file_url)
    }else if(fileArr.length === 0){
      console.log('set picture []')
      setPicture([])
    }
  }

    // 设置视频图片上传文件值
    const setVideoUploadFile = (fileList:any) => {
      setUploadVideoChanged(true)
      let fileArr = DataHelper.getLastUploadFile(fileList)
      console.log("fileArr is ", fileArr)
      if(fileArr.length > 0){
        setPictureVideo(fileArr)
        // setPreviewImg(fileArr[0].file_url)
      }else if(fileArr.length === 0){
        console.log('set picture []')
        setPictureVideo([])
      }
    }
    // 设置视频图片上传文件值
    const setAudioUploadFile = (fileList:any) => {
      setUploadVideoChanged(true)
      let fileArr = DataHelper.getLastUploadFile(fileList)
      console.log("fileArr is ", fileArr)
      if(fileArr.length > 0){
        setPictureAudio(fileArr)
        // setPreviewImg(fileArr[0].file_url)
      }else if(fileArr.length === 0){
        console.log('set picture []')
        setPictureAudio([])
      }
    }
    // 设置视频图片上传文件值
    const setFileUploadFile = (fileList:any) => {
      setUploadFileChanged(true)
      let fileArr = DataHelper.getLastUploadFile(fileList)
      console.log("fileArr is ", fileArr)
      if(fileArr.length > 0){
        setPictureFile(fileArr)
        // setPreviewImg(fileArr[0].file_url)
      }else if(fileArr.length === 0){
        console.log('set picture []')
        setPictureFile([])
      }
    }

    const parseData = (key:any,options:any) => {
      // console.log(options);
      var name:any = "";
      if(Array.isArray(options) && options.length>0){
        options.map(item=>{
          if(item.alias_key == key){
            name = item?.item_value;
          }
        })
      }
      return name
    }


  // 初始化变量
  const token = BdHelper.getBdToken()

  // 编辑时初始化 picture
  const defaultPicture = DataHelper.buildFileByUrl(parseData('repair_image',imageValues))
  const defaultVideoPicture = DataHelper.buildFileByUrl(parseData('repair_video',imageValues))
  const defaultAudioPicture = DataHelper.buildFileByUrl(parseData('repair_audio',imageValues))
  const defaultFilePicture = DataHelper.buildFileByUrl(parseData('repair_doc',imageValues))

  // 是否展示图片上传按钮
  const showUploadButton = DataHelper.showUploadBtn(isUpdate, picture, defaultPicture, uploadChanged)
  const showUploadVideoButton = DataHelper.showUploadBtn(isUpdate, pictureVideo, defaultVideoPicture, uploadVideoChanged)
  const showUploadAudioButton = DataHelper.showUploadBtn(isUpdate, pictureAudio, defaultAudioPicture, uploadAudioChanged)
  const showUploadFileButton = DataHelper.showUploadBtn(isUpdate, pictureFile, defaultFilePicture, uploadFileChanged)

  // 弹出框
  // @ts-ignore
  return <Card>
    <div className={styles.top_tip}>
    四种附件可以分开存储，也可以存储在同一个云服务中，只需四个存储设置填写一致即可。
    </div>
    <Tabs defaultActiveKey="1" onTabClick={(key:any)=>{queryData(key)}}>
      <TabPane key="1" tab="图片设置">
    <Col span={15}>
      <div className={styles.module_title}>存储设置：</div>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'存储服务商'} extra="应用市场可以安装更多服务商">
        {form.getFieldDecorator('images_service', {
          initialValue: parseData('images_service',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Select placeholder={formatMessage({ id: 'app.base.please_select' })} size={'default'} style={{ width: '100%' }}>
        {common.imageOption  && TsxHelper.buildSelectOption(common.imageOption)}
      </Select>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'Secret ID'}>
        {form.getFieldDecorator('images_secret_id', {
          initialValue: parseData('images_secret_id',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'SecretKey'}>
        {form.getFieldDecorator('images_secret_key', {
          initialValue: parseData('images_secret_key',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'存储配置名称'}>
        {form.getFieldDecorator('images_bucket_name', {
          initialValue: parseData('images_bucket_name',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'存储配置地域'} extra="用不到则留空">
        {form.getFieldDecorator('images_bucket_area', {
          initialValue: parseData('images_bucket_area',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'存储配置域名'} extra="http:// 或 https:// 开头，结尾不带 /">
        {form.getFieldDecorator('images_bucket_domain', {
          initialValue: parseData('images_bucket_domain',dataImgFormValues),
          rules: [{ pattern: /(http|https):\/\/([\w.]+\/?)\S*(?<![/])$/, message: '请输入合法域名'}],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>

    <Col span={15}>
      <div className={styles.module_title}>{'功能配置'}：</div>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'支持的扩展名'} extra="以英文逗号 , 隔开">
        {form.getFieldDecorator('images_ext', {
          initialValue: parseData('images_ext',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'支持的最大尺寸'} extra="单位：MB，如果用户角色有单独设置将以用户角色为准">
        {form.getFieldDecorator('images_max_size', {
          initialValue: parseData('images_max_size',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<InputNumber placeholder={formatMessage({ id: 'app.base.please_input' })} style={{width:'100%'}}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'防盗链 Key'} extra="未开启则留空">
        {form.getFieldDecorator('images_url_key', {
          initialValue: parseData('images_url_key',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'防盗链签名有效期'} extra="单位：分钟">
        {form.getFieldDecorator('images_url_expire', {
          initialValue: parseData('images_url_expire',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<InputNumber placeholder={formatMessage({ id: 'app.base.please_input' })} style={{width:'100%'}}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'配置图样式名'} extra="样式名的“间隔标识符”常见为半角字符 “!”、“-”、“_” 三种">
        {form.getFieldDecorator('images_thumb_config', {
          initialValue: parseData('images_thumb_config',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'头像图样式名'} extra="样式名的“间隔标识符”常见为半角字符 “!”、“-”、“_” 三种">
        {form.getFieldDecorator('images_avatar_thumb', {
          initialValue: parseData('images_avatar_thumb',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    {/* <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'头像大图样式名'} extra="样式名是用来实时处理图片，可以压缩、缩放、打水印等各种功能">
        {form.getFieldDecorator('image_avatar_big', {
          initialValue: parseData('image_avatar_big',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col> */}
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'帖子缩略图样式名'} extra="等比例缩略图">
        {form.getFieldDecorator('images_post_thumb', {
          initialValue: parseData('images_post_thumb',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'帖子正缩图样式名'} extra="正方形缩略图">
        {form.getFieldDecorator('images_post_square', {
          initialValue: parseData('images_post_square',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'帖子大图样式名'} extra="所有样式名输入框支持输入高级参数">
        {form.getFieldDecorator('images_post_big', {
          initialValue: parseData('images_post_big',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'评论缩略图样式名'} extra="等比例缩略图">
        {form.getFieldDecorator('images_comment_thumb', {
          initialValue: parseData('images_comment_thumb',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'评论正缩图样式名'} extra="正方形缩略图">
        {form.getFieldDecorator('images_comment_square', {
          initialValue: parseData('images_comment_square',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'评论大图样式名'} extra="所有样式名输入框支持输入高级参数">
        {form.getFieldDecorator('images_comment_big', {
          initialValue: parseData('images_comment_big',dataImgFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>

    <Col span={15}>
      <div style={{display: 'flex',justifyContent:'center',marginTop:20,}}>
        <Button type="primary" style={{marginLeft:30}} onClick={()=>{okImageHandle()}}>保存</Button>
      </div>
    </Col>
    </TabPane>
    <TabPane key="2" tab="视频设置">
    <Col span={15}>
      <div className={styles.module_title}>存储设置：</div>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'存储服务商'} extra="应用市场可以安装更多服务商">
        {form.getFieldDecorator('videos_service', {
          initialValue: parseData('videos_service',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Select placeholder={formatMessage({ id: 'app.base.please_select' })} size={'default'} style={{ width: '100%' }}>
        {common.videoOption && TsxHelper.buildSelectOption(common.videoOption)}
      </Select>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'Secret ID'}>
        {form.getFieldDecorator('videos_secret_id', {
          initialValue: parseData('videos_secret_id',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'SecretKey'}>
        {form.getFieldDecorator('videos_secret_key', {
          initialValue: parseData('videos_secret_key',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'存储配置名称'}>
        {form.getFieldDecorator('videos_bucket_name', {
          initialValue: parseData('videos_bucket_name',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'存储配置地域'} extra="用不到则留空">
        {form.getFieldDecorator('videos_bucket_area', {
          initialValue: parseData('videos_bucket_area',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'存储配置域名'} extra="http:// 或 https:// 开头，结尾不带 /">
        {form.getFieldDecorator('videos_bucket_domain', {
          initialValue: parseData('videos_bucket_domain',dataFormValues),
          rules: [{ pattern: /(http|https):\/\/([\w.]+\/?)\S*(?<![/])$/, message: '请输入合法域名'}],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>

    <Col span={15}>
      <div className={styles.module_title}>{'功能配置'}：</div>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'视频支持的扩展名'} extra="以英文逗号 , 隔开">
        {form.getFieldDecorator('videos_ext', {
          initialValue: parseData('videos_ext',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'支持的最大尺寸'} extra="单位：MB，如果用户角色有单独设置将以用户角色为准">
        {form.getFieldDecorator('videos_max_size', {
          initialValue: parseData('videos_max_size',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<InputNumber placeholder={formatMessage({ id: 'app.base.please_input' })} style={{width:'100%'}}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'视频的最大时长'} extra="单位：秒，如果用户角色有单独设置将以用户角色为准">
        {form.getFieldDecorator('videos_max_time', {
          initialValue: parseData('videos_max_time',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<InputNumber placeholder={formatMessage({ id: 'app.base.please_input' })} style={{width:'100%'}}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'防盗链 Key'} extra="未开启则留空">
        {form.getFieldDecorator('videos_url_key', {
          initialValue: parseData('videos_url_key',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'防盗链签名有效期'} extra="单位：分钟">
        {form.getFieldDecorator('videos_url_expire', {
          initialValue: parseData('videos_url_expire',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<InputNumber placeholder={formatMessage({ id: 'app.base.please_input' })} style={{width:'100%'}}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'视频转码模板参数'} extra="未开启则留空">
        {form.getFieldDecorator('videos_transcode', {
          initialValue: parseData('videos_transcode',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'视频水印模板参数'} extra="未开启则留空">
        {form.getFieldDecorator('videos_watermark', {
          initialValue: parseData('videos_watermark',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'视频截图模板参数'} extra="未开启则留空">
        {form.getFieldDecorator('videos_screenshot', {
          initialValue: parseData('videos_screenshot',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'视频转动图模板参数'} extra="未开启则留空">
        {form.getFieldDecorator('videos_gift', {
          initialValue: parseData('videos_gift',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>

    <Col span={15}>
      <div style={{display: 'flex',justifyContent:'center',marginTop:20,}}>
        <Button type="primary" style={{marginLeft:30}} onClick={()=>{okVideoHandle()}}>保存</Button>
      </div>
    </Col>
    </TabPane>
    <TabPane key="3" tab="音频设置">
    <Col span={15}>
      <div className={styles.module_title}>存储设置：</div>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'存储服务商'} extra="应用市场可以安装更多服务商">
        {form.getFieldDecorator('audios_service', {
          initialValue: parseData('audios_service',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Select placeholder={formatMessage({ id: 'app.base.please_select' })} size={'default'} style={{ width: '100%' }}>
        {common.audioOption && TsxHelper.buildSelectOption(common.audioOption)}
      </Select>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'Secret ID'}>
        {form.getFieldDecorator('audios_secret_id', {
          initialValue: parseData('audios_secret_id',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'SecretKey'}>
        {form.getFieldDecorator('audios_secret_key', {
          initialValue: parseData('audios_secret_key',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'存储配置名称'}>
        {form.getFieldDecorator('audios_bucket_name', {
          initialValue: parseData('audios_bucket_name',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'存储配置地域'} extra="用不到则留空">
        {form.getFieldDecorator('audios_bucket_area', {
          initialValue: parseData('audios_bucket_area',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'存储配置域名'} extra="http:// 或 https:// 开头，结尾不带 /">
        {form.getFieldDecorator('audios_bucket_domain', {
          initialValue: parseData('audios_bucket_domain',dataFormValues),
          rules: [{ pattern: /(http|https):\/\/([\w.]+\/?)\S*(?<![/])$/, message: '请输入合法域名'}],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>

    <Col span={15}>
      <div className={styles.module_title}>{'功能配置'}：</div>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'音频支持的扩展名'} extra="以英文逗号 , 隔开">
        {form.getFieldDecorator('audios_ext', {
          initialValue: parseData('audios_ext',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'支持的最大尺寸'} extra="单位：MB，如果用户角色有单独设置将以用户角色为准">
        {form.getFieldDecorator('audios_max_size', {
          initialValue: parseData('audios_max_size',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<InputNumber placeholder={formatMessage({ id: 'app.base.please_input' })} style={{width:'100%'}}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'音频的最大时长'} extra="单位：秒，如果用户角色有单独设置将以用户角色为准">
        {form.getFieldDecorator('audios_max_time', {
          initialValue: parseData('audios_max_time',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<InputNumber placeholder={formatMessage({ id: 'app.base.please_input' })} style={{width:'100%'}}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'防盗链 Key'} extra="未开启则留空">
        {form.getFieldDecorator('audios_url_key', {
          initialValue: parseData('audios_url_key',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'防盗链签名有效期'} extra="单位：分钟">
        {form.getFieldDecorator('audios_url_expire', {
          initialValue: parseData('audios_url_expire',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<InputNumber placeholder={formatMessage({ id: 'app.base.please_input' })} style={{width:'100%'}}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'音频转码模板参数'} extra="未开启则留空">
        {form.getFieldDecorator('audios_transcode', {
          initialValue: parseData('audios_transcode',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>

    <Col span={15}>
      <div style={{display: 'flex',justifyContent:'center',marginTop:20,}}>
        <Button type="primary" style={{marginLeft:30}} onClick={()=>{okAudioHandle()}}>保存</Button>
      </div>
    </Col>
    </TabPane>
    <TabPane key="4" tab="文件设置">
    <Col span={15}>
      <div className={styles.module_title}>存储设置：</div>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'存储服务商'} extra="应用市场可以安装更多服务商">
        {form.getFieldDecorator('docs_service', {
          initialValue: parseData('docs_service',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Select placeholder={formatMessage({ id: 'app.base.please_select' })} size={'default'} style={{ width: '100%' }}>
        {common.fileOption && TsxHelper.buildSelectOption(common.fileOption)}
      </Select>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'Secret ID'}>
        {form.getFieldDecorator('docs_secret_id', {
          initialValue: parseData('docs_secret_id',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'SecretKey'}>
        {form.getFieldDecorator('docs_secret_key', {
          initialValue: parseData('docs_secret_key',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'存储配置名称'}>
        {form.getFieldDecorator('docs_bucket_name', {
          initialValue: parseData('docs_bucket_name',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'存储配置地域'} extra="用不到则留空">
        {form.getFieldDecorator('docs_bucket_area', {
          initialValue: parseData('docs_bucket_area',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'存储配置域名'} extra="http:// 或 https:// 开头，结尾不带 /">
        {form.getFieldDecorator('docs_bucket_domain', {
          initialValue: parseData('docs_bucket_domain',dataFormValues),
          rules: [{ pattern: /(http|https):\/\/([\w.]+\/?)\S*(?<![/])$/, message: '请输入合法域名'}],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>

    <Col span={15}>
      <div className={styles.module_title}>{'功能配置'}：</div>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'支持的扩展名'} extra="以英文逗号 , 隔开">
        {form.getFieldDecorator('docs_ext', {
          initialValue: parseData('docs_ext',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'支持的最大尺寸'} extra="单位：MB，如果用户角色有单独设置将以用户角色为准">
        {form.getFieldDecorator('docs_max_size', {
          initialValue: parseData('docs_max_size',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<InputNumber placeholder={formatMessage({ id: 'app.base.please_input' })} style={{width:'100%'}}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'防盗链 Key'} extra="未开启则留空">
        {form.getFieldDecorator('docs_url_key', {
          initialValue: parseData('docs_url_key',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'防盗链签名有效期'} extra="单位：分钟">
        {form.getFieldDecorator('docs_url_expire', {
          initialValue: parseData('docs_url_expire',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<InputNumber placeholder={formatMessage({ id: 'app.base.please_input' })} style={{width:'100%'}}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'在线预览配置'} extra="文件地址变量名 {file}，留空代表未开启">
        {form.getFieldDecorator('docs_online_preview', {
          initialValue: parseData('docs_online_preview',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>
    <Col span={15}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'在线预览扩展名'} extra="支持在线预览的文件扩展名">
        {form.getFieldDecorator('docs_preview_ext', {
          initialValue: parseData('docs_preview_ext',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
      </FormItem>
    </Col>

    <Col span={15}>
      <div style={{display: 'flex',justifyContent:'center',marginTop:20,}}>
        <Button type="primary" style={{marginLeft:30}} onClick={()=>{okFileHandle()}}>保存</Button>
      </div>
    </Col>
    </TabPane>
    <TabPane tab="补位图设置" key="5">
      <Col span={15}>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'图片无效提示图'} extra="当图片状态为“无效”时输出的补位提示用途图">
          {form.getFieldDecorator('picture', {
            initialValue: defaultPicture,
            // rules: [{required: true, message: '请上传图片'}],
          })(
            <Upload
              listType={'picture'}
              className={'upload-list-inline'}
              action="/api/admin/tweetfiles/upload"
              defaultFileList={defaultPicture}
              beforeUpload={(file) => {
                console.log('before upload file type:', file.type)
                // todo: 这里可以对上传文件类型做限制
                return true;
              }}
              data={{ type: 'image' , table_key: 'repair_image' }}
              onRemove={() => setPicture([])}
              onChange={(changeObj) => setUploadFile(changeObj.fileList)}
              onPreview={() => handlePreviewModalVisible(true)}
              headers={{
                Authorization: `Bearer ${token}`,
              }}
            >
              {
                showUploadButton ? (
                  <Button>
                    <Icon type="upload"/> {formatMessage({ id: 'app.base.upload' })}
                  </Button>
                ) : null
              }
            </Upload>
          )}
        </FormItem>
      </Col>
      <Col span={15}>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'视频无效提示图'} extra="当视频状态为“无效”时输出的补位提示用途图">
          {form.getFieldDecorator('pictureVideo', {
            initialValue: defaultVideoPicture,
            // rules: [{required: true, message: '请上传图片'}],
          })(
            <Upload
              listType={'picture'}
              className={'upload-list-inline'}
              action="/api/admin/tweetfiles/upload"
              defaultFileList={defaultVideoPicture}
              beforeUpload={(file) => {
                console.log('before upload file type:', file.type)
                // todo: 这里可以对上传文件类型做限制
                return true;
              }}
              data={{ type: 'image' , table_key: 'repair_video'}}
              onRemove={() => setPictureVideo([])}
              onChange={(changeObj) => setVideoUploadFile(changeObj.fileList)}
              onPreview={() => handlePreviewModalVisible(true)}
              headers={{
                Authorization: `Bearer ${token}`,
              }}
            >
              {
                showUploadVideoButton ? (
                  <Button>
                    <Icon type="upload"/> {formatMessage({ id: 'app.base.upload' })}
                  </Button>
                ) : null
              }
            </Upload>
          )}
        </FormItem>
      </Col>
      <Col span={15}>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'音频无效提示图'} extra="当音频状态为“无效”时输出的补位提示用途图">
          {form.getFieldDecorator('pictureAudio', {
            initialValue: defaultAudioPicture,
            // rules: [{required: true, message: '请上传图片'}],
          })(
            <Upload
              listType={'picture'}
              className={'upload-list-inline'}
              action="/api/admin/tweetfiles/upload"
              defaultFileList={defaultAudioPicture}
              beforeUpload={(file) => {
                console.log('before upload file type:', file.type)
                // todo: 这里可以对上传文件类型做限制
                return true;
              }}
              data={{ type: 'image' , table_key: 'repair_audio'}}
              onRemove={() => setPictureAudio([])}
              onChange={(changeObj) => setAudioUploadFile(changeObj.fileList)}
              onPreview={() => handlePreviewModalVisible(true)}
              headers={{
                Authorization: `Bearer ${token}`,
              }}
            >
              {
                showUploadAudioButton ? (
                  <Button>
                    <Icon type="upload"/> {formatMessage({ id: 'app.base.upload' })}
                  </Button>
                ) : null
              }
            </Upload>
          )}
        </FormItem>
      </Col>
      <Col span={15}>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'文档无效提示图'} extra="当文档状态为“无效”时输出的补位提示用途图">
          {form.getFieldDecorator('pictureFile', {
            initialValue: defaultFilePicture,
            // rules: [{required: true, message: '请上传图片'}],
          })(
            <Upload
              listType={'picture'}
              className={'upload-list-inline'}
              action="/api/admin/tweetfiles/upload"
              defaultFileList={defaultFilePicture}
              beforeUpload={(file) => {
                console.log('before upload file type:', file.type)
                // todo: 这里可以对上传文件类型做限制
                return true;
              }}
              data={{ type: 'image' , table_key: 'repair_doc'}}
              onRemove={() => setPictureFile([])}
              onChange={(changeObj) => setFileUploadFile(changeObj.fileList)}
              onPreview={() => handlePreviewModalVisible(true)}
              headers={{
                Authorization: `Bearer ${token}`,
              }}
            >
              {
                showUploadFileButton ? (
                  <Button>
                    <Icon type="upload"/> {formatMessage({ id: 'app.base.upload' })}
                  </Button>
                ) : null
              }
            </Upload>
          )}
        </FormItem>
      </Col>
      <Col span={15}>
        <div style={{display: 'flex',justifyContent:'center',marginTop:20,}}>
          <Button type="primary" style={{marginLeft:30}} onClick={()=>{okUploadHandle()}}>保存</Button>
        </div>
      </Col>
    </TabPane>
    </Tabs>
    {
      previewModelVisible && (
        <PreviewForm
          previewModelVisible={previewModelVisible}
          onVisibleModel={handlePreviewModalVisible}
          previewImg={previewImg}
        />
      )
    }
  </Card>;
};

export default Form.create<DataFormProps>()(DataForm);
